<script>
import UserApi from '../../api/user';

export default {
    data() {
        return {
            user: {}
        }
    },
    methods: {
        async getUser(userId) {
            try {
                const api = new UserApi();
                let res = await api.find(userId);
                this.user = res.data;
                console.log(this.user);
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        async saveUser() {
            try {
                const api = new UserApi();
                let res = await api.changeProfile(this.user);
                if (res.code === 200) {
                    this.$myMessageBox(res.msg);
                    this.$router.replace({ name: "user-profile" });
                }
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
    },
    mounted() {
        this.getUser(this.$route.params.id);
    }
}
</script>

<template>
    <div class="user-profile-edit">
        <div class="header">
            <h2>用户信息</h2>
            <p>
                <router-link class="button" :to="'/user/change-profile/' + user.id">修改个人信息</router-link>
                <router-link class="button" :to="'/user/change-password/' + user.id">修改密码</router-link>
                <a class="button" href="javascript:void(0);" @click="$goBack">返回</a>
            </p>
        </div>
        <div class="block">
            <p>
                <label for="nickname">昵称</label>
                <input type="text" id="nickname" v-model="user.nickname" />
            </p>
            <p>
                <label for="truename">姓名</label>
                <input type="text" id="truename" v-model="user.truename" />
            </p>
            <p>
                <button @click="saveUser">保存</button>
            </p>
        </div>
    </div>
</template>

<style scoped></style>